
<template>
	<div class="risk-content">
		<van-search
			class="info_search input_text"
			@search="onSearch"
			@clear="clearSearch"
			v-model="Value"
			placeholder="搜索"
		/>
		<div>
			<van-list
				style="margin: 5px"
				:finished="finished"
				v-model="loading"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click="_goDetail(item)"
					>
						<div class="plan-detail-hd mb-10">
							<div>
								<span class="circular">
									<span class="circular_num" style="">{{ index + 1 }}</span>
								</span>
							</div>

							<!-- <img
									src="@/assets/Images/AppIcon/icon_studyplan_icon.png"
									alt=""
								/> -->
							<div class="mt-5">
								<div class="plan-detail-title mb-10">{{ item.Title }}</div>
								<div class="plan-detail-describe">
									{{ item.Content }}
								</div>
								<div class="plan-detail-describe mt-5">
									接收时间： {{ item.CreateDate }}
								</div>
							</div>
						</div>
						<div type="warning" class="plan-detail-tag">
							<van-icon name="arrow" />
						</div>
					</div>
				</div>
			</van-list>
		</div>
	</div>
</template>

<script>
import { commonMessagePageData } from '@/api/commonMessage.js'
import { getDateTime } from '@/utils/getDate.js'
import { doMessageClick } from '@/utils/message.js'

export default {
	data() {
		return {
			Value: '',
			filter: {
				page: 0,
				dataType: 'TaskList',
			},
			list: [],
			finished: false,
			loading: false,
		}
	},
	created() {
		this.getList()
		if(this.$store.state.navTo == "message"){
            this.$store.commit("setNavTo", "");
        }
	},
	methods: {
		onSearch() {
			this.filter.page = 0
			var conditions = [
				{
					Name: 'Keywords',
					DisplayName: '',
					Value: '',
					Operator: 'like',
					DataType: 'String',
				},
			]
			conditions.forEach((item) => {
				item.DisplayName = this.Value
				item.Value = this.Value
			})

			this.filter.conditions = JSON.stringify(conditions)
			this.getList()
		},
		clearSearch() {
			this.filter = {
				page: 0,
				dataType: 'UnFinish',
			}
			this.getList()
		},
		onLoad() {
			this.loading = true
			++this.filter.page
			commonMessagePageData(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		getList() {
			this.loading = true
			commonMessagePageData(this.filter).then((res) => {
				this.loading = false
				if (!res.data.HasNextPage) {
					this.finished = true
				}
				this.list = res.data.Data
				this.filter.page = res.data.PageIndex
			})
		},

		_goDetail(item) {
			doMessageClick.call(this, item)
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #e8f1f8;
	min-height: 100vh;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.circular {
	border-radius: 50%;
	height: 50px;
	width: 50px;
	margin-top: 10px;
	margin-right: 5px;
	display: inline-block;
	background: #57beda;
	.circular_num {
		display: block;
		color: #ffffff;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	//   vertical-align: top;
}

.plan-detail {
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 8px;
	padding: 10px;
	color: #333;
	font-size: 10px;
	position: relative;
	.plan-detail-tag {
		position: absolute;
		top: 40%;
		right: 10px;
	}
}

.plan-detail-hd {
	display: flex;
	img {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}
	.plan-detail-title {
		font-size: 14px;
		color: #333;
	}
	span {
		color: #666;
	}
}
.plan-detail-describe {
	width: 90%;
	font-size: 12px;
	line-height: 1.2;
	// word-break: break-all;
	text-overflow: ellipsis;
	color: #666;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
	overflow: hidden; /** 隐藏超出的内容 **/
	word-break: break-all;
}
.plan-detail-bd {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>